<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>雪花飘落</title>
	</head>
	<style type="text/css">
		body{ 
			background-image: url(../white%20bear.jpg); 
			background-size: cover;
			/* height: 80%; 
			width: 80%; */
		}
		.xh{cursor: pointer;}
	</style>
	<body>
		<p class="bk">
		</p>
	</body>
	<script src="../js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		var minSize = 5; // 最小字体
		var maxSize = 50; // 最大字体
		var newOne = 200; //生成雪花间隔
		var flakColor = "#fff"; // 生成雪花颜色
		var flak= $("<p class='xh'></p>").css({position:"absolute","top":"0px"}).html("*");//定义一个雪花
		var dhight = $(window).height(); // 定义视图高度
		var dw = $(window).width(); // 定义视图宽度
		
		setInterval(function(){
			var sizeflak = minSize+Math.random()*maxSize; // 产生代大小不等的雪花
			var startLeft = Math.random()*dw; // 雪花生成是随机的left值
			var starttopcity = 0.7+Math.random()*0.3; // 随机的透明度
			var endpositionTop = dhight -100; // 雪花停止top的位置
			var endLeft = Math.random()*dw; // 雪花停止的left位置
			var durationfull = 5000+Math.random()*3000; // 雪花飘落速度的不同
			
			flak.clone().appendTo($("body")).css({
				"left":startLeft,
				"opacity":starttopcity,
				"font-size":sizeflak,
				"color": flakColor
			}).animate({
				"top":endpositionTop,
				"left":endLeft,
				"apacity":0.1
			},durationfull,function(){
				$(this).remove()
				});
				},newOne);
	</script>
</html>
